<template>
  <!-- 头部栏 -->
  <van-row class="header">
    <van-col :span="2"><van-icon name="arrow-left" @click="backBtn" /></van-col>
    <van-col :span="22">
      <van-cell :title="toTitleName()">
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <template #right-icon>
          <van-icon name="search" class="search-icon" @click="toSearch" />
        </template>
      </van-cell>
    </van-col>
  </van-row>
</template>

<script>
export default {
  name: "summerFruitHeader",
  data() {
    return {
      headerName: ["夏季水果", "西瓜", "黑美人"],
    };
  },
  methods: {
    //返回header标题信息
    toTitleName() {
      console.log(this.headerName);
      if (this.$route.matched.length == 1) {
        return this.headerName[0];
      } else if (this.$route.matched.length == 2) {
        return this.headerName[1];
      } else {
        return this.headerName[2];
      }
    },
    // 跳转至搜索页面
    toSearch() {
      this.$router.push("/search");
    },
    // 返回上一次访问页面
    backBtn() {
      history.back();
    },
  },
};
</script>

<style lang="less" scoped>
//搜索按钮
.search-icon {
  font-size: 16px;
  line-height: inherit;
}
// 头部栏目样式
.header {
  background-color: #4bd863;
  // 头部栏基本样式
  .van-cell {
    height: 55px;
    color: white;
    font-size: 14px;
    font-weight: bold;
    background-color: #4bd863;
  }
  // 左边返回按钮
  .van-icon-arrow-left {
    line-height: 55px;
    background-color: #4bd863;
    color: white;
    font-weight: bold;
  }
  // 左边返回按钮
  .van-icon-arrow-left {
    font-size: 24px;
    padding: 0px 10px 0px 0px;
  }
  // title标题样式
  .van-cell__title {
    font-size: 18px;
    line-height: 35px;
  }
  // 右边搜索按钮
  .van-icon-search {
    font-size: 24px;
    line-height: 35px;
  }
}
</style>